import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'

import { HotRecommendWrapper } from './style'
import AreaHeader from '@/components/area-header'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import { fetchDiscoverPersonalized } from '@/store/modules/discover'
import SongItem from '@/components/song-item'

interface IProps {
  children?: ReactNode
}

const HotRecommend: FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    // 获得推荐歌单
    dispatch(fetchDiscoverPersonalized())
  }, [])

  //获得推荐歌单
  const { personalized } = useAppSelector(
    (state) => ({
      personalized: state.discover.personalized
    }),
    shallowEqualApp
  )

  return (
    <HotRecommendWrapper>
      <AreaHeader
        title="热门推荐"
        keywords={['华语', '流行', '摇滚', '民谣', '电子']}
        moreLink="/discover/songs"
      ></AreaHeader>

      <div className="content">
        <div className="list">
          {personalized.map((item, index) => {
            return (
              <SongItem item={item} key={index}></SongItem>
            )
          })}
        </div>
      </div>
    </HotRecommendWrapper>
  )
}

export default memo(HotRecommend)
